<template>
  <div>
    <!-- 欢迎卡片 -->
    <div class="welcome-card">
      <div class="welcome-content">
        <div class="welcome-text">
          <h2>您好！{{ data.user?.name }}，欢迎回来</h2>
          <p>纸境壁纸艺术管理平台</p>
        </div>
        <div class="welcome-image">
          <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="壁纸预览">
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧内容 -->
      <div class="content-left">
        <!-- 系统公告 -->
        <div class="card">
          <div class="card-header">
            <i class="el-icon-message"></i>
            <span>系统公告</span>
          </div>
          <el-timeline>
            <el-timeline-item
                v-for="(item, index) in data.noticeData"
                :key="index"
                :timestamp="item.time"
                placement="top"
            >
              <el-card shadow="hover">
                <h4>{{ item.title }}</h4>
                <p>{{ item.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 壁纸风格展示 -->
        <div class="card">
          <div class="card-header">
            <i class="el-icon-picture-outline"></i>
            <span>精选壁纸风格</span>
          </div>
          <div class="style-gallery">
            <div class="style-item nature">
              <div class="style-overlay">自然风景</div>
            </div>
            <div class="style-item abstract">
              <div class="style-overlay">抽象艺术</div>
            </div>
            <div class="style-item anime">
              <div class="style-overlay">动漫游戏</div>
            </div>
            <div class="style-item city">
              <div class="style-overlay">城市建筑</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="content-right">
        <!-- 壁纸欣赏 -->
        <div class="card">
          <div class="card-header">
            <i class="el-icon-view"></i>
            <span>今日精选</span>
          </div>
          <div class="featured-wallpaper">
            <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" alt="今日精选壁纸">
            <div class="wallpaper-info">
              <h3>晨曦山脉</h3>
              <p>摄影师：自然之眼</p>
              <div class="tags">
                <el-tag>自然</el-tag>
                <el-tag>风景</el-tag>
                <el-tag>高清</el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 快捷操作 -->
        <div class="card">
          <div class="card-header">
            <i class="el-icon-operation"></i>
            <span>快捷操作</span>
          </div>
          <div class="quick-actions">
            <el-button type="primary" icon="el-icon-upload" class="action-btn">上传新壁纸</el-button>
            <el-button icon="el-icon-collection" class="action-btn">管理分类</el-button>
            <el-button icon="el-icon-edit" class="action-btn">编辑推荐</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  noticeData: []
})

// 加载公告
const loadNotice = () => {
  request.get('/notice/selectAll').then(res => {
    if (res.code === '200') {
      data.noticeData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}

onMounted(() => {
  loadNotice();
})
</script>

<style scoped>
.welcome-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4ff 100%);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text h2 {
  color: #3a5f8f;
  margin-bottom: 10px;
}

.welcome-text p {
  color: #7d7d9c;
  font-size: 16px;
}

.welcome-image img {
  height: 120px;
  width: 180px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.main-content {
  display: flex;
  gap: 20px;
}

.content-left {
  flex: 1;
  min-width: 0;
}

.content-right {
  width: 380px;
}

.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #3a5f8f;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.card-header i {
  margin-right: 10px;
}

.style-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.style-item {
  height: 120px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.style-item.nature {
  background-image: url('https://images.unsplash.com/photo-1501854140801-50d01698950b');
}

.style-item.abstract {
  background-image: url('https://images.unsplash.com/photo-1557800636-894a64c1696f');
}

.style-item.anime {
  background-image: url('https://images.unsplash.com/photo-1637858868799-7f26a0640eb6');
}

.style-item.city {
  background-image: url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df');
}

.style-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 8px;
  text-align: center;
  font-size: 14px;
}

.featured-wallpaper {
  margin-top: 10px;
}

.featured-wallpaper img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 15px;
}

.wallpaper-info h3 {
  color: #3a5f8f;
  margin-bottom: 8px;
}

.wallpaper-info p {
  color: #7d7d9c;
  margin-bottom: 12px;
}

.tags .el-tag {
  margin-right: 8px;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  width: 100%;
}
</style>